window.onload = function() {
	let canvasEl = document.getElementById("tutorial");
	if (!canvasEl.getContext) return;

	let ctx = canvasEl.getContext("2d"); // 2d | webgl

	let sun = new Image();
	sun.src =
		"https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/640b4df0a5074e9a9bf4777fdf1fd74e~tplv-k3u1fbpfcp-watermark.image";
	let earth = new Image();
	earth.src =
		"https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4ad71733e934b818a52bcfea56a683f~tplv-k3u1fbpfcp-watermark.image";
	let moon = new Image();
	moon.src =
		"https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/05bc3992bd5044448f029b7d68049b38~tplv-k3u1fbpfcp-watermark.image";

	requestAnimationFrame(draw); //1秒钟会回调 61次

	// 绘画
	function draw() {
		ctx.clearRect(0, 0, 300, 300);
		ctx.save();
		drawBg(); //绘制背景
		drawEarth(); //地球
		ctx.restore();
		requestAnimationFrame(draw);
	}

	// 绘制背景
	function drawBg() {
		ctx.save();
		ctx.drawImage(sun, 0, 0); // 背景图
		ctx.translate(150, 150); // 移动坐标
		ctx.strokeStyle = "rgba(0, 153, 255, 0.4)";
		ctx.beginPath(); // 绘制轨道
		ctx.arc(0, 0, 105, 0, Math.PI * 2);
		ctx.stroke();
		ctx.restore();
	}

	// 地球旋转
	function drawEarth() {
		let time = new Date();
		let second = time.getSeconds();
		let milliseconds = time.getMilliseconds();
		ctx.save(); // 地球开始转
		ctx.translate(150, 150); // 中心点坐标系
		ctx.rotate(
			((Math.PI * 2) / 10) * second +
			((Math.PI * 2) / 10 / 1000) * milliseconds
		);
		ctx.translate(105, 0); // 圆上的坐标系
		ctx.drawImage(earth, -12, -12);
		drawMoon(second, milliseconds);
		drawEarthMask();

		ctx.restore(); // earth end
	}
	// 月球旋转
	function drawMoon(second, milliseconds) {
		ctx.save(); // moon start
		ctx.rotate(
			((Math.PI * 2) / 2) * second +
			((Math.PI * 2) / 2 / 1000) * milliseconds
		);
		ctx.translate(0, 28);
		ctx.drawImage(moon, -3.5, -3.5);
		ctx.restore(); // moon end
	}
	// 绘制地球的蒙版
	function drawEarthMask() {
		ctx.save();
		ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
		ctx.fillRect(0, -12, 40, 24);
		ctx.restore();
	}
};